<template>
	<view class="pages" :style="themeStyle">
		<!-- #ifdef APP-PLUS | H5 -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<my-navbar 
			title="限时抢购" 
			:color="app.themeConfig.text_color || '#000000'"
			:leftIconColor="app.themeConfig.text_color || '#000000'"
			leftText=""
			:hasNavbarHeight="false"
			background="transparent"
			@leftClick="back"
		></my-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<my-wxCustomTitleBar class="wxnavbar" title="限时抢购" @leftClick="back"></my-wxCustomTitleBar>
		<!-- #endif -->
		<img :src="saleBackgroundImg" alt="" class="bg-image" />
		<scroll-view :scroll-x="true" class="parts">
			<view class="inblock" v-for="(item,index) in partsData" @click="select(index,item)" :key="item.id">
				<view :class="['part flex-column',{on: selectIndex==index}]" >
					<view class="name">{{ item.start_time | formattedTime }}</view>
					<view>{{ item.status==1 ? '抢购中' : '即将开始' }}</view>
				</view>
			</view>
		</scroll-view>
			<view class="content">
				<view class="time">
					<text class="text">{{ status==1 ? '距离结束' : '距离开始' }}</text>
					<u-count-down :timestamp="timestamp" separator="zh" :color="app.themeConfig.text_color" :bg-color="app.themeConfig.text_color2"></u-count-down>
				</view>
				<scroll-view class="goods-scroll" :scroll-y="true">
					<view 
						:class="['list flex-btw', { 'disabled-item' : item.inventory_surplus == 0 }]"
						v-for="item in goodsList" :key="item.id" 
						@click="toDetail(item.goods_id)"
					>
						<image class="img" :src="item.img" mode=""></image>
						<view class="content_right">
							<view class="name">{{item.goods_name}}</view>
							<view v-show="canshowprice" class="price">活动价：￥<text class="num">{{item.price}}</text>/{{item.goods_spu.spu_name.title}}</view>
							<view v-show="canshowprice" class="price old">
								原价：￥{{item.market_price}}/{{item.goods_spu.spu_name.title}}
							</view>
							<view class="bottom flex-btw">
								<view class="store">
									<text>起订量：{{item.minimum}}</text>
									<text style="margin-left:24rpx;">剩余库存：{{item.inventory_surplus}}</text>
								</view>
								<view @click.stop="showCart(item)" class="add flex-center" v-if="status==1">
									<img class="cart" src="../../static/image/cart.svg" alt="">
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		<my-addcart ref="minicart" :canshowprice="canshowprice"></my-addcart>
	</view>
</template>

<script>
import {$https} from '@/static/js/request.js';
import MixinShowprice from '@/static/js/mixinshowprice.js';
const app = getApp().globalData;
export default {
	data() {
		return {
			app,
			partsData:[],	//场次
			goodsList:[],	//商品列表
			page:1,
			alltotal:0,
			nowId:null,	//当前场次id
			selectIndex:0,	//当前选择的场次
			status:0,	//当前所选场次的状态
			timestamp:0,	//当前所选场次的倒计时
			canshowprice: null,
		};
	},
	mixins:[ MixinShowprice ],
	onLoad(){
		this.getData();
	},
	filters: {
		formattedTime(val) {
			const date = new Date(val * 1000);
			// 提取月、日和时分
			const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从0开始，所以加1
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			return `${month}月${day}日${hour}:${minute}`;
		}
	},
	computed: {
		themeStyle() {
      return `
        --theme-text-color: ${app.themeConfig.text_color || "#000000"};
        --theme-time-color: ${app.themeConfig.text_color2 || "#40AE36"};
        --theme-bg-color: ${app.themeConfig.theme_color || "#F6F6F7"};
      `;
    },
		saleBackgroundImg() {
			return	app.themeConfig.sale_background_img || "https://copartner.oss-cn-beijing.aliyuncs.com/logo/2411/23/0LCVLXgAfVTNE44VC0JGlRE3tU51Egq3VB2lI460.png";
		}
	},
	methods:{
		getData(){
			$https('GET','getPanicBuyList',{},res=>{
				if(res.data.errcode==0){
					let data = res.data.data;
					this.partsData = data;
					this.status = data[0].status;
					let now = (new Date().getTime()/1000).toFixed(0);
					this.timestamp = data[0].status==1 ? (data[0].end_time - now) : (data[0].start_time - now);
					this.getGoods(data[0].id,1);
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.errmsg
					})
				}
			})
		},
		getGoods(id,page){
			var params = {
				id,
				page,
				size:15,
			}
			$https('GET','getPanicBuyGoodsList',params,res=>{
				if(res.data.errcode==0){
					this.page = page;
					this.nowId = id;
					this.alltotal = res.data.data.count;
					if(page==1){
						this.goodsList = res.data.data.list;
					}else{
						let oldData = this.goodsList;
						this.goodsList = oldData.concat(res.data.data.list);
					}
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.errmsg
					})
				}
			})
		},
		select(index,data){
			this.selectIndex = index;
			this.status = data.status;
			let now = (new Date().getTime()/1000).toFixed(0);
			this.timestamp = this.status==1 ? (data.end_time - now) : (data.start_time - now);
			this.getGoods(data.id,1);
		},
		toDetail(id){
			uni.navigateTo({
				url:`/subindex/index/shopdetail?id=${id}`
			})
		},
		//显示小购物车
		showCart(data) {
			let newData = {
				id:data.goods_id,
				name:data.goods_name,
				img:data.img,
				is_standard:data.is_standard,
				spu:[{
					market_price:data.price,
					id:data.goods_spu.id,
					minimum:data.minimum,
					inventory_left:data.inventory_surplus,
					designated_inventory:1,	//是否限量库存 1:有限制 
					spu_name:data.goods_spu.spu_name.title,
					unit:data.goods_spu.spu_unit.title,
				}],
				
			}
			this.$refs.minicart.open(newData)
		},
		back() {
			// #ifdef H5
				window.history.back(-1);
			// #endif 
			// #ifndef H5
			uni.navigateBack();
			// #endif	
		},
	},
	onReachBottom(){
		if(this.goodsList.length<this.alltotal){
			this.page++;
			this.getGoods(this.nowId,this.page);
		}
	},
}
</script>

<style lang="scss" scoped>
$fontColor: var(--theme-text-color);
$buttonColor: var(--theme-time-color);
$bgColor: var(--theme-bg-color);

.pages {
	background-color: $bgColor;
}
/deep/.u-drawer {
	overflow: unset !important;
}
.status_bar{
	@include container(100%, var(--status-bar-height), $bgColor);
}
.bg-image {
	@include container(100%, 480rpx);
	vertical-align: bottom;
}
.parts{
	@include container(100%, 130rpx, $buttonColor);
	padding: 20rpx 10rpx;
	white-space: nowrap;
	box-sizing: border-box;
	.inblock{
		display: inline-block;
		padding-right: 10rpx;
		margin-right: 10rpx;
		border-right: 1px solid $bgColor;
		&:last-child {
			border-right: none;
			margin-right: 0;
		}
		.part{
			@include container(100%, 90rpx);
			@include font-style(28rpx, $fontColor);
			padding: 0 36rpx;
			border-radius: 8rpx;
			.name{
				@include container(auto, auto);
				@include text-ellipsis;
				text-align: center;
			}
			&.on{
				background: $bgColor;
				font-weight: bold;
			}
		}
		
	}
}
.content{
	padding: 0 30rpx 20rpx;
	.time {
		@include container(100%, 40rpx);
		@include font-style(24rpx, $fontColor);
    line-height: 40rpx;
		margin: 15rpx 0;
		text-align: right;
		/deep/.u-countdown-colon, /deep/.u-countdown-time {
      font-size: 24rpx !important;
			color: $fontColor !important;
      padding: 2rpx;
    }
    .text {
			margin-right: 8rpx;
    }
  }
	.goods-scroll {
		height: calc(100vh - 480rpx - 130rpx - 90rpx);
	}
	.list{
		padding: 18rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.img{
			@include container(207rpx, 163rpx);
			margin-right: 12rpx;
		}
		.content_right{
			flex:1;
			.name{
				@include font-style(26rpx, #333333, bold);
			}
			.price{
				@include font-style(22rpx, #FF2C2C, bold);
				.num{
					font-size: 32rpx;
				}
			}
			.old{
				display: inline-block;
				text-decoration-line: line-through;
				@include font-style(20rpx, #999999);
			}
			.bottom{
				height: 55rpx;
				.store{
					@include font-style(20rpx, #999999);
				}
				.add{
					@include container(55rpx, 55rpx, $buttonColor);
					border-radius: 55rpx;
					.cart {
						@include container(60%, 60%);
					}
				}
			}
		}
	}
	.disabled-item {
		opacity: 0.5;
		pointer-events: none;
	}
}
</style>
